<template>
	<view class="maintian">
		<!-- 人员切换 -->
		<view class="maintian_header">
			<view class="card statistics_card">
				<view class="title light">
					<view>
						{{ title }}-统计
						<text v-if="userList.length > 1" class="totalTxt">{{ `(统计人数:${userList.length}人)` }}</text>
					</view>

					<view class="data-change" @click="changeMember" v-if="findRoute('data_change') && !childDeep">
						<image src="@/static/images/index/change.svg" mode=""></image>
						切换
					</view>
				</view>
			</view>
		</view>

		<!-- 人员切换end -->
		<!-- 保养任务时长 -->
		<workTime :title="title" ref="workTime" v-if="userList.length && findRoute('mystatistics_maintain_duration')"
			@showSPicker="showSPicker($event, 'workTime')" @changeMbs="changeMbs($event, 'workTime')"
			@showKeysSelect="showKeysSelect($event, 'workTime')" @applyToAll="getApplyToAll" :userList="userList"
			:memberList="memberList" :groupId="groupId" :childDeep="childDeep" :filterDef="filter"
			:pageScrollTop="pageScrollTop" :safeAreaBottom="safeAreaBottom">
		</workTime>
		<!-- 保养任务 人工时 -->
		<workTimePeople :title="title" ref="workTimePeople"
			v-if="userList.length && findRoute('mystatistics_maintain_people')"
			@showSPicker="showSPicker($event, 'workTimePeople')" @changeMbs="changeMbs($event, 'workTimePeople')"
			@showKeysSelect="showKeysSelect($event, 'workTimePeople')" @applyToAll="getApplyToAll" :userList="userList"
			:memberList="memberList" :groupId="groupId" :childDeep="childDeep" :filterDef="filter"
			:pageScrollTop="pageScrollTop" :safeAreaBottom="safeAreaBottom">
		</workTimePeople>
		<!-- 保养执行 -->
		<work-status v-if="findRoute('mystatistics_maintain_implement')" :title="title" ref="workStatus"
			:userList="userList" :memberList="memberList" :groupId="groupId"
			@showSPicker="showSPicker($event, 'workStatus')" @changeMbs="changeMbs($event, 'workStatus')"
			@showKeysSelect="showKeysSelect($event, 'workStatus')" :pageScrollTop="pageScrollTop"
			@changeFilter="changeFilter" :childDeep="childDeep" @applyToAll="getApplyToAll"
			:safeAreaBottom="safeAreaBottom"></work-status>
		<!-- 保养时效性 -->
		<timeliness v-if="findRoute('mystatistics_maintain_timely')" :title="title" ref="timeliness"
			:userList="userList" :memberList="memberList" :groupId="groupId"
			@showSPicker="showSPicker($event, 'timeliness')" @changeMbs="changeMbs($event, 'timeliness')"
			@showKeysSelect="showKeysSelect($event, 'timeliness')" @applyToAll="getApplyToAll"
			:pageScrollTop="pageScrollTop" :childDeep="childDeep" :safeAreaBottom="safeAreaBottom"></timeliness>
		<!-- 逾期情况 -->
		<overdue v-if="findRoute('mystatistics_maintain_overdue')" :title="title" ref="overdue" :userList="userList"
			:memberList="memberList" :groupId="groupId" @showSPicker="showSPicker($event, 'overdue')"
			@changeMbs="changeMbs($event, 'overdue')" @showKeysSelect="showKeysSelect($event, 'overdue')"
			@applyToAll="getApplyToAll" :pageScrollTop="pageScrollTop" :childDeep="childDeep"
			:safeAreaBottom="safeAreaBottom"></overdue>

		<!-- 保养时长 -->
		<work-duration v-if="findRoute('mystatistics_maintain_timeline')" :title="title" ref="workDuration"
			:userList="userList" :memberList="memberList" :groupId="groupId"
			@showSPicker="showSPicker($event, 'workDuration')" @changeMbs="changeMbs($event, 'workDuration')"
			@showKeysSelect="showKeysSelect($event, 'workDuration')" @applyToAll="getApplyToAll"
			:pageScrollTop="pageScrollTop" :childDeep="childDeep" :safeAreaBottom="safeAreaBottom"></work-duration>
		<!-- 签到签退 -->
		<work-sign v-if="findRoute('mystatistics_maintain_sign')" :title="title" ref="worksign" :userList="userList"
			:memberList="memberList" :groupId="groupId" @showSPicker="showSPicker($event, 'worksign')"
			@changeMbs="changeMbs($event, 'worksign')" @showKeysSelect="showKeysSelect($event, 'worksign')"
			@applyToAll="getApplyToAll" :pageScrollTop="pageScrollTop" :childDeep="childDeep"
			:safeAreaBottom="safeAreaBottom"></work-sign>
		<!-- 工单评分 -->
		<work-score v-if="findRoute('mystatistics_maintain_score')" :title="title" @applyToAll="getApplyToAll"
			ref="workscore" :userList="userList" :memberList="memberList" :pageScrollTop="pageScrollTop"
			:groupId="groupId" :childDeep="childDeep" :safeAreaBottom="safeAreaBottom"></work-score>
		<memberSelect v-if="memberList.length" :members="memberList" ref="memberSelect" @success="changeMbsFuc">
		</memberSelect>
		<tagSelect ref="tagSelect" @success="changeTags"></tagSelect>
		<sPicker ref="sPicker" @change="changeDateType"></sPicker>
	</view>
</template>

<script>
import { getLastDates } from '@/utils/tools.js';
import workTime from './workTime.vue';
import workTimePeople from './workTimePeople.vue';
import WorkStatus from './workStatus.vue';
import timeliness from './timeliness.vue';
import overdue from './overdue.vue';
import WorkSign from './workSign.vue';
import WorkDuration from './workDuration.vue';
import WorkScore from './workScore.vue';
import { mapState } from 'vuex';

import sPicker from '../../components/s-picker/s-picker.vue';
import tagSelect from '../components/tag-select.vue';
import memberSelect from '../components/member-select.vue';
export default {
	components: { overdue, workTime, workTimePeople, WorkStatus, timeliness, WorkSign, WorkDuration, WorkScore, sPicker, tagSelect, memberSelect },
	props: {
		childDeep: {
			type: [Number, String],
			default: 0
		},
		pageScrollTop: {
			type: [Number, String],
			default: 0
		},
		safeAreaBottom: {
			type: [Number, String],
			default: 0
		}
	},
	data() {
		return {
			dateTypes: ['按日', '按周', '按月'],
			userList: [],
			groupId: '',
			memberList: [],
			title: '',
			filter: {}
		};
	},
	computed: {
		...mapState('user', ['userinfo'])
	},

	async mounted() {
		uni.$on('setDatas', this.setDataFuc);
		// await this.getRoutes()
		this.setDataFuc();
	},
	beforeDestroy() {
		uni.$off('setDatas');
	},

	methods: {
		showKeysSelect(res, key) {
			this.$refs.tagSelect.init({
				tags: res.leaderHead,
				key: key
			});
		},
		changeTags(res) {
			console.log('自定义表格字段', res);
			this.$refs[res.key].changeTags(res);
		},
		showSPicker(res, key) {
			this.$refs.sPicker.init({
				options: this.dateTypes,
				value: res.dateType,
				keyval: key
			});
		},
		changeDateType(res) {
			console.log('changeDateType', res);
			this.$refs[res.keyval].changeDateType(res);
		},
		changeMbsFuc(res) {
			console.log('changeMbsFuc', res);
			this.$refs[res.key].changeMbsFuc(res);
		},
		// 对比名单
		changeMbs(res, key) {
			// lineTypeGroup:[],//选中的组
			// lineTypeMbs:[],//选中的人
			// 组id
			let groups = [];
			// 人id
			let mbs = [];
			if (res.lineTypeGroup.length == 0) {
				// 是否有选中的组
				for (let i = 0; i < this.memberList.length; i++) {
					groups.push(this.memberList[i].id);
				}
			} else {
				groups = JSON.parse(JSON.stringify(res.lineTypeGroup));
			}
			if (res.lineTypeMbs.length == 0) {
				// 是否有选中的人
				mbs = JSON.parse(JSON.stringify(this.userList));
			} else {
				mbs = JSON.parse(JSON.stringify(res.lineTypeMbs));
			}
			if (groups.length > 5) {
				groups = groups.slice(0, 5);
			}

			if (mbs.length > 5) {
				mbs = mbs.slice(0, 5);
			}
			this.$refs.memberSelect.init({
				type: res.type,
				groups,
				mbs,
				key
			});
		},

		// 切换人员
		changeMember() {
			// hanleToken('set', 'statisticalTabIndex', 1);
			uni.navigateTo({
				url: '/pages/memberSelect/memberSelect'
			});
		},
		// 修改数据源
		setDataFuc() {
			this.groupModel = this.findRoute('data_change');

			if (!this.filter.startTime) {
				const dates = getLastDates(7);
				this.filter.startTime = dates.startTime;
				this.filter.endTime = dates.endTime;
			}

			uni.getStorage({
				key: 'statistical' + (this.childDeep ? this.childDeep : ''),
				success: res => {
					console.log('修改数据源-maintian', res);
					// 默认年审梯类型
					this.tabNums = res.data.tabNums || 0;
					this.groupId = res.data.groupId;
					this.memberList = res.data.groupList || [];
					this.title = res.data.title;
					this.userList = res.data.id.split(',');
					if (res.data.filter) {
						this.filter = res.data.filter;
					}
					let filter = res.data.filter ? res.data.filter : null;
					// this.initData();
					this.$nextTick(() => {
						// 保养任务工单时长
						if (this.findRoute('mystatistics_maintain_duration')) {
							this.$refs.workTime.initData(filter);
						}

						// 保养任务人时长
						if (this.findRoute('mystatistics_maintain_people')) {
							this.$refs.workTimePeople.initData(filter);
						}
						// 保养执行
						if (this.findRoute('mystatistics_maintain_implement')) {
							this.$refs.workStatus.initData(filter);
						}
						// 保养时效性
						if (this.findRoute('mystatistics_maintain_timely')) {
							this.$refs.timeliness.initData(filter);
						}

						// 逾期情况
						if (this.findRoute('mystatistics_maintain_overdue')) {
							this.$refs.overdue.initData(filter);
						}
						//    保养时长
						if (this.findRoute('mystatistics_maintain_timeline')) {
							this.$refs.workDuration.initData(filter);
						}
						// 签到签退
						if (this.findRoute('mystatistics_maintain_sign')) {
							this.$refs.worksign.initData(filter);
						}
						// 工单评分
						if (this.findRoute('mystatistics_maintain_score')) {
							this.$refs.workscore.initData(filter);
						}
					});
				}
			});
		},

		// 递归获取组下所有用户id
		getMemberIds(nodes, arr) {
			for (let i = 0; i < nodes.length;) {
				if (nodes[i].type == 2) {
					arr.push(nodes[i].id);
				} else {
					if (nodes[i].children && nodes[i].children.length > 0) {
						arr = arr.concat(this.getMemberIds(nodes[i].children, []));
					}
				}
				i++;
			}
			return arr;
		},
		// 应用到全部
		getApplyToAll(data) {
			// console.log(data,"应用到全部")
			this.$nextTick(() => {
				// 保养任务时长
				if (this.findRoute('mystatistics_maintain_duration')) {
					this.$refs.workTime.initData(data);
				}
				// 保养任务人时长
				if (this.findRoute('mystatistics_maintain_people')) {
					this.$refs.workTimePeople.initData(data);
				}
				// 保养执行
				if (this.findRoute('mystatistics_maintain_implement')) {
					this.$refs.workStatus.initData(data);
				}
				// 保养时效性
				if (this.findRoute('mystatistics_maintain_timely')) {
					this.$refs.timeliness.initData(data);
				}

				// 逾期情况
				if (this.findRoute('mystatistics_maintain_overdue')) {
					this.$refs.overdue.initData(data);
				}
				//    保养时长
				if (this.findRoute('mystatistics_maintain_timeline')) {
					this.$refs.workDuration.initData(data);
				}
				// 签到签退
				if (this.findRoute('mystatistics_maintain_sign')) {
					this.$refs.worksign.initData(data);
				}
				// 工单评分
				if (this.findRoute('mystatistics_maintain_score')) {
					this.$refs.workscore.initData(data);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.maintian {
	width: 100%;
	overflow: hidden;
	padding-top: 100rpx;
}

.card {
	background-color: #fff;
	width: calc(100% - 80rpx);
	padding: 20rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	border-radius: 8rpx;

	.title {
		font-size: 32rpx;
		border-left: 4rpx solid #ffffff;
		line-height: 32rpx;
		padding-left: 16rpx;
		color: #333333;
		font-weight: bold;
		margin-left: -19rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.light {
		border-left: 4rpx solid #0091ff;
		display: flex;

		// align-items: center;
		view {
			display: flex;
		}
	}

	.data-change {
		color: #0091ff;
		font-size: 24rpx;
		padding: 3rpx 0rpx;
		font-weight: normal;
		display: flex;
		line-height: 22rpx;
		align-items: center;
		justify-content: center;
		letter-spacing: 1rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			padding-top: 4rpx;
			margin-right: 3rpx;
		}
	}

	.totalTxt {
		color: #999;
		font-weight: normal;
		font-size: 24rpx;
		margin-left: 4rpx;
		display: inline-block;
	}
}

.maintian_header {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
	/* padding-bottom: 0; */
	position: fixed;
	top: 80rpx;
	left: 0;
	z-index: 50;
	background: #f0f0f0;
}

.statistics_card {
	margin: 0;
	width: 710rpx;
	box-sizing: border-box;

	.light {
		margin-bottom: 0;

		view:nth-child(1) {
			display: block;
			width: 77%;
		}
	}
}
</style>
